<template>
  <el-drawer
    v-model="visible"
    append-to-body
    :title="title || '无标题'"
    modal-class="EditInstructionDrawer"
    @close="() => emits('visibleChange', false)"
  >
    <div class="drawerContent">
      <el-form
        :model="postForm"
        class="form"
        label-width="130px"
        label-position="right"
        ref="formRef"
      >
        <div class="topFlex">
          <el-form-item label="domain" aria-placeholder="domain">
            <el-input v-model="postForm.domain" :style="{ width: '320px' }">
              <template #append>
                <el-select
                  v-model="domainSelect"
                  filterable
                  placeholder="domain"
                >
                  <el-option
                    v-for="item in props.domainArr"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="intent" aria-placeholder="intent">
          <el-input v-model="postForm.intent" :style="{ width: '320px' }">
            <template #append>
              <el-select v-model="intentSelect" filterable placeholder="intent">
                <el-option
                  v-for="item in props.intentArr"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="slot" prop="slot">
          <el-input
            v-model="postForm.slot"
            type="textarea"
            rows="4"
            resize="none"
            :style="{ width: '580px' }"
          />
        </el-form-item>
      </el-form>

      <div class="buttons">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认 </el-button>
          <el-button
            @click="
              () => {
                visible = false;
                emits('visibleChange', false);
              }
            "
          >
            取消
          </el-button>
        </el-form-item>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { api_updateInstructBert } from "@/api/manage";
import { reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const props = defineProps({
  show: Boolean,
  title: String,
  defaultInfo: Object,
  domainArr: Array,
  intentArr: Array,
});

const emits = defineEmits(["visibleChange", "submitSuccess"]);

const visible = ref(props.show);

const formRef = ref();

const domainSelect = ref("");
const intentSelect = ref("");
const slotItemSelect = ref("");

const postForm = reactive({
  instructCode: "",
  instructName: "",
  domain: "",
  intent: "",
  slot: "",
});

const dragListRef = ref(null);

const init = () => {};
defineExpose({ init });

// 是否显示有相同指令提示语
const hasSameInstructName = ref(false);

watch(
  () => props.show,
  (newVale) => {
    visible.value = newVale;
    hasSameInstructName.value = false;
  }
);

const initDefaultInfo = (defaultInfo) => {
  console.log("defaultInfo = ", defaultInfo);
  Object.assign(postForm, {
    instructCode: defaultInfo.instructCode,
    instructName: defaultInfo.instructName,
    domain: defaultInfo.domain,
    intent: defaultInfo.intent,
    slot: defaultInfo.slot,
  });
  domainSelect.value = defaultInfo.domain;
  intentSelect.value = defaultInfo.intent;
};

watch(
  () => props.defaultInfo,
  (newVal) => {
    initDefaultInfo(newVal);
  },
  { deep: true }
);
watch(
  () => props.show,
  (newVal) => {
    if (!newVal) return;
    initDefaultInfo(props.defaultInfo);
  }
);

watch(
  () => domainSelect.value,
  (newVal) => {
    postForm.domain = newVal;
  }
);
watch(
  () => intentSelect.value,
  (newVal) => {
    postForm.intent = newVal;
  }
);

const onSubmit = async () => {
  const requestInfo = { ...postForm };

  console.log("requestInfo = ", requestInfo);
  const res = await api_updateInstructBert(requestInfo);
  if (res.success === true) {
    visible.value = false;
    emits("visibleChange", false);
    emits("submitSuccess", requestInfo);
    ElMessage.success("请求成功");
  } else {
    ElMessage.error("请求失败,接口返回:" + res.msg);
  }
};
</script>

<style lang="scss" scoped>
.drawerContent {
  position: relative;
  min-height: 100%;
  padding-bottom: 30px;

  .form {
    :deep(.el-form-item .el-form-item__label) {
      font-size: 15px;
      color: #333;
    }
    .topFlex {
      display: flex;
      gap: 25px;
    }
    .second {
      display: flex;
      .id {
        display: flex;
        gap: 5px;
        .info {
          position: relative;
          top: 5px;
          width: 20px;
          height: 20px;
        }
      }
    }

    .flex_data_name {
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      & info {
        position: relative;
        top: 5px;
        width: 20px;
        height: 20px;
      }
    }

    .openUrl {
      display: flex;
      gap: 5px;
      .info {
        position: relative;
        top: 5px;
        width: 20px;
        height: 20px;
      }
    }
    .flexVersion {
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      & info {
        position: relative;
        top: 5px;
        width: 20px;
        height: 20px;
      }
    }
    .voicesWrapper {
      .voices {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .voiceItem {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        .voiceCommandsHandler {
          width: 10px;
          height: 32px;
          background-color: #eee;
          cursor: move;
        }
        .input {
          width: 500px;
        }
        & .add,
        .delete {
          position: relative;
          top: 3px;
          width: 25px;
          height: 25px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .isOpen {
      display: flex;
      gap: 10px;
      span {
        font-size: 14px;
        line-height: 30px;
        color: #999;
      }
    }
  }

  .buttons {
    position: absolute;
    bottom: -20px;
    right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    :deep(.el-button) {
      width: 100px;
      height: 35px;
    }
  }
}

:deep(.edit-url-menu) {
  .openUrl {
    flex-direction: column;
  }

  .mobileUrl {
    display: flex;
  }

  .el-menu--horizontal {
    justify-content: space-around;
    border-bottom: none !important;
  }

  .el-menu-demo {
    margin-bottom: 10px;
  }
}
</style>
